﻿* { padding:0;	margin: 0 0 0 0px;
} 
body
{
	font-size:12px;
	font-family: Arial, "Times New Roman", Times, serif;
}
#page {
	width:960px;
	margin:0 auto;	
	overflow:hidden;/*Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi*/
	border:1px solid #999;
	}
.loginleft {
 float:left;
}
.logintxt2 {
    padding-left:-10px;
    color:#fff;
    font-weight:700;
    margin-top:150px;
    margin-bottom:initial;
}
.inputpad2 {
    margin-left:0px;
  padding:0 4px;
  padding-top:0px;
  padding-right:4px;
  padding-bottom:0px;
  padding-left:4px;
}
/* HEADER SETTING */
#header {width:960px;}
#header #logo {
	height:199px;	
	background:url(../images/mypath.jpg) x-repeat;}
#header #logo a img {
	margin-top:60px;
	float:left;
	width: 232px;}
#header #logo img {
	border-style: none;
	border-color: inherit;
	border-width: medium;
	float:right;
		width: 960px;
        height:199px;
}

/* Tạo menu ngang */
#nav_menu_4,#nav_menu_4 ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav_menu_4 {
font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
height: 36px;
list-style: none outside none;
margin:0px auto;
text-shadow: 0 -1px 3px #202020;
width: 960px;

/* border radius */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;

/* box shadow */
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px 33CC66;

/* gradient */
background-color:rgb(80, 152, 92);
}
#nav_menu_4 ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;
}
#nav_menu_4 li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;
}
#nav_menu_4 li:first-child {
border-left: 0 none;
margin-left: 5px;
}
#nav_menu_4 li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
background-color:Maroon;
}

@-webkit-keyframes animation1 {
0% {
-webkit-transform: scale(1);
}
30% {
-webkit-transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes animation1 {
0% {
-moz-transform: scale(1);
}
30% {
-moz-transform: scale(1.3);
}
100% {
-moz-transform: scale(1);
}
}
#nav_menu_4 li > a:hover {
-moz-animation-name: animation1;
-moz-animation-duration: 0.7s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: animation1;
-webkit-animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#nav_menu_4 li:hover > a {
z-index: 4;
}
#nav_menu_4 li:hover ul.subs {
left: 0;
top: 34px;
width: 150px;
}
#nav_menu_4 ul li {
background: none repeat scroll 0 0 #838383;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
opacity: 0;
width: 100%;
}

@-webkit-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
@-moz-keyframes animation2 {
0% {
margin-left:185px;
}
100% {
margin-left:0px;
opacity:1;
}
}
#nav_menu_4 li:hover ul li {
/* css3 animation */
-moz-animation-name: animation2;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: animation2;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
/* animation delays */
#nav_menu_4 li:hover ul li:nth-child(1) {
-moz-animation-delay: 0;
-webkit-animation-delay: 0;
}
#nav_menu_4 li:hover ul li:nth-child(2) {
-moz-animation-delay: 0.05s;
-webkit-animation-delay: 0.05s;
}
#nav_menu_4 li:hover ul li:nth-child(3) {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#nav_menu_4 li:hover ul li:nth-child(4) {
-moz-animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
}
#nav_menu_4 li:hover ul li:nth-child(5) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#nav_menu_4 li:hover ul li:nth-child(6) {
-moz-animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
}
#nav_menu_4 li:hover ul li:nth-child(7) {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#nav_menu_4 li:hover ul li:nth-child(8) {
-moz-animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
}
/*Kết thúc tạo menu ngang */

/* MAIN SETTING */
#main {
	padding:10px 0px;
   	overflow:hidden;
	background:#FAFAFA;
}
#main #left {
	float:left;
	width:200px;
}
#main #content-right {
	float:right;
	width:750px;
}
#main #content-right #right {
	float:right;
	width:200px;
}
#main #content-right #content {
	float:left;
	width:520px;
	padding:10px;
}
/* LEFT SETTING */
#left {
	font-weight:bold;
	font-size:14px;
}
#left ul {
	list-style:none;
}
#left ul li a {	
	display:block;	
	/*padding-left:22px;	*/
	text-decoration:none;
	color:#000;
	border-bottom:2px solid #FFF;		
}
#left ul li a:hover {	
    color:#00F;
}
#left ul li a.active {
	color:#000;
}
#left ul li a span {
    font-weight: normal;
    color: #666;
}
#menu a {
	height:30px;
	line-height:30px;
	background:url(../images/list-style.gif) 10px 15px no-repeat #EEE;
}
#menu a:hover {
	background:url(../images/list-style2.gif) 10px 15px no-repeat #EEE;
	color:Maroon;
}
#left div {
	margin-bottom:20px;
}
#left img {
	float:right;
	border:none;
}
#left p {
	font-weight:bold;
	padding-left:25px;	
	line-height:36px;
	color:#000;	
	background:url(../images/title.jpg) no-repeat;
}
/* CONTENT SETTING */
#content {			
	border:1px solid #999;
}
.title a {
    font-weight: bold;
    text-decoration: none;
}
.box {
    float:left;
	display:block;
	width:120px;
    height:170px;
	margin:2px;
    text-align: center;
	/*border:1px solid #999;*/
	border: 3px solid #fff; 
  }
.box img {
    border:none;
}
.box .name {
    height: 2.5em;
}
.box .cost {
    color:red;
}
.myBox  
{ 
  width:240px;
  height:150px;
  display:block;  
  padding:5px;
  margin:5px; 
  text-align: left;
  background-color: #fff; 
  border: 1px solid #999; 
}
.myBox .name
{	 height: 2.5em;	
}
.name a, a:active
{	 text-decoration:none;}
.myBox .cost
{	color:Red;}
/* FOOTER SETTING */
#footer {
	color:#FFF;
	width:100%;
	background:#666;
	overflow:hidden;
	border-top:5px solid #F66D05;
}
#footer p {
	float:left;
	padding:20px 40px;
	width: 351px;
}

